<template>
  <div class="page-effect">
    <div class="title-box">
      <!-- 统计时间 -->
      <DateTypeSelect
        :date-options="dateOptions"
        :date-type="dateType"
        @date-change="onDateChange"
      />
    </div>

    <!-- 导航栏切换start -->
    <el-tabs
      v-model="activeName"
      type="card"
      class="nav-box"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="$t('dataAnalysis.microPageAnalysis')"
        name="1"
      />
      <el-tab-pane
        :label="$t('dataAnalysis.businessPageAnalysis')"
        name="2"
      />
    </el-tabs>
    <!-- end -->

    <!-- 页面详情列表 -->
    <div class="flow-form">
      <!-- native modifier has been removed, please confirm whether the function has been affected  -->
      <el-form
        :model="form"
        @submit.prevent
      >
        <el-form-item :label="$t('dataAnalysis.pageBrowsing') + ':'">
          <el-checkbox-group v-model="form.saleIndex">
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.pageviews')"
              checked
            >
              <span>{{ $t('dataAnalysis.pageviews') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.pageviewsTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.numberOfVisitors')"
              checked
            >
              <span>{{ $t('dataAnalysis.numberOfVisitors') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.visitorsTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.stayTime')"
            >
              <span>{{ $t('dataAnalysis.stayTime') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.stayTimeTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.shareTimes')"
            >
              <span>{{ $t('dataAnalysis.shareTimes') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.shareTimesTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.sharePeopleTimes')"
            >
              <span>{{ $t('dataAnalysis.sharePeopleTimes') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.sharePeopleTimesTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('dataAnalysis.guidingTransformation') + ':'">
          <el-checkbox-group v-model="form.serviceIndex">
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gTOrderAmount')"
            >
              <span>{{ $t('dataAnalysis.gTOrderAmount') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gTTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gTNumber')"
            >
              <span>{{ $t('dataAnalysis.gTNumber') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gTOrderTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.bAOC')"
            >
              <span>{{ $t('dataAnalysis.bAOC') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.bAOCTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gtPA')"
            >
              <span>{{ $t('dataAnalysis.gtPA') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gtPATips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gPayNumber')"
            >
              <span>{{ $t('dataAnalysis.gPayNumber') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gPayNumberTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gVToP')"
            >
              <span>{{ $t('dataAnalysis.gVToP') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gVToPTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="$t('dataAnalysis.guidingTransformation') + ':'"
          class="hide-label"
        >
          <span id="maxSelectSpan">{{ $t('dataAnalysis.upTo5') }}</span>
          <span class="form-inline-select">{{ $t('dataAnalysis.selected') }} <span class="blue">{{ selectNum }}</span> /{{ $t('dataAnalysis.fiveItems') }}</span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 单选框函数选择展示不同端数据 -->
    <div class="plat">
      <el-radio-group
        v-model="platValue"
        @change="radioChange"
      >
        <el-radio-button
          label="0"
          class="plat-item"
        >
          {{ $t('date.a') }}
        </el-radio-button>
        <el-radio-button
          label="1"
          class="plat-item"
        >
          pc
        </el-radio-button>
        <el-radio-button
          label="2"
          class="plat-item"
        >
          h5
        </el-radio-button>
        <el-radio-button
          label="3"
          class="plat-item"
        >
          {{ $t('sysManagement.miniPrograms') }}
        </el-radio-button>
        <el-radio-button
          label="4"
          class="plat-item"
        >
          {{ $t('dataAnalysis.android') }}
        </el-radio-button>
        <el-radio-button
          label="5"
          class="plat-item"
        >
          ios
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- /选择展示不同端数据 -->
    <!-- 整体看板 -->
    <div class="whole-plate">
      <!-- 图表 -->
      <Table
        :prod-data="prodData"
        :page-type="activeName"
        style="width: 100%"
        @sort-data="sortData"
      />
      <!-- /图表 -->
    </div>
    <!-- 分页 -->
    <el-pagination
      v-if="prodData.data.length"
      :current-page="page.pageIndex"
      :page-sizes="[5, 10, 20, 30, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
    <!-- /分页 -->
    <!-- /整体看板 -->
  </div>
</template>

<script setup>
import DateTypeSelect from '../components/date-type-select.vue'
import Table from './components/table.vue'
import moment from 'moment'
import Big from 'big.js'

const dateOptions = [
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalWeek'),
    value: 2
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  },
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  }
]

// 时间更新
const dateType = ref(5)
const dateRange = ref([])
const onDateChange = (data) => {
  dateType.value = data.timeType
  dateRange.value = [moment(data.dateRange[0]).unix() * 1000, moment(data.dateRange[1]).unix() * 1000]
  sizeChangeHandle()
}

const form = reactive({
  saleIndex: [], // 销售指标
  serviceIndex: [] // 服务指标
})
const selectNum = ref(0) // 选择指标的数量
const sumData = ref([])
watch([() => form.saleIndex, () => form.serviceIndex], () => {
  selectNum.value = form.serviceIndex.length + form.saleIndex.length
  sumData.value = []
  sumData.value = sumData.value.concat(form.serviceIndex).concat(form.saleIndex)
  prodData.sumData = sumData.value
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 5) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
    if (selectNum.value < 5) {
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 5) {
    textShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, { deep: true })

/**
 * 获取商品概况数据
 */
const platValue = ref('0')
const activeName = ref('1')
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 5 // 每页显示多少条
})
const prodData = reactive({
  sumData: [], // 所有指标
  data: [] // 数据
}) // 商品概况列表
const getProdEffect = () => {
  http({
    url: http.adornUrl('/platform/flowPageAnalysis/page'),
    method: 'get',
    params: http.adornParams(
      {
        current: page.currentPage,
        size: page.pageSize,
        systemType: platValue.value, // 系统类型 0:全部 1:pc  2:h5  3:小程序 4:安卓  5:ios
        pageType: activeName.value, // 1:页面统计数据  2:商品详情页数据
        start: dateRange.value[0] || 0,
        timeType: dateType.value, // 1、2、3需要传时间戳，4、5、6不需要，1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天，自然周没有
        sort, // 0默认；1降序；2升序
        sortType // 0默认；1浏览量；2访客数; 3点击次数；4点击人数; 5分享访问次数；6分享访问人数；7引导下单金额；8引导下单人；9引导支付金额；10引导支付人数
      }
    )
  }).then(({ data }) => {
    if (data) {
      data.records.forEach(element => {
        if (element.singleProdRate > 0) {
          Big.DP = 2
          element.singleProdRate = new Big(element.singleProdRate).times(100).toFixed()
        }
      })
      prodData.data = data.records
      page.total = data.total
      page.pageSize = data.size
      page.currentPage = data.current
    }
  })
}

// 列表排序回调
let sortType = 0
let sort = 0
const sortData = (sortPar, typePar) => {
  sort = sortPar
  sortType = typePar
  getProdEffect()
}

/**
* 导航栏切换的响应函数
*/
const handleClick = (tab) => {
  activeName.value = tab.paneName
  sizeChangeHandle()
}

// 单选框切换的响应
const radioChange = () => {
  sizeChangeHandle()
}

// 每页数
const sizeChangeHandle = (val) => {
  page.pageSize = !val ? page.pageSize : val
  page.currentPage = 1
  getProdEffect()
}
// 当前页
const currentChangeHandle = (val) => {
  page.currentPage = val
  getProdEffect()
}
/**
 * 文字效果
 */
const textShare = (div, color) => {
  div.style.color = color
}

</script>

<style lang="scss" scoped>
.page-effect {
  .title-box {
    background: #f7f8fa;
    padding: 15px 20px;
    margin-bottom: 20px;
  }
  .flow-form {
    padding: 20px 20px;
    background: #f7f8fa;
    margin-bottom: 20px;
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
    :deep(.hide-label.el-form-item) {
      .el-form-item__label {
        color: transparent;
      }
      .blue {
        color: #155bd4;
      }
    }
    :deep(.el-checkbox__label) {
      line-height: 14px;
    }
    .question-icon {
      display: inline-block;
      font-size: 13px;
      padding: 0 4px;
      line-height: 15px;
      color: #fff;
      background: #C8C9CC;
      border-radius: 50%;
      font-style: normal;
      font-weight: normal;
    }
  }

  .whole-plate {
    margin-bottom: 20px;
  }

  .nav-box {
    :deep(.el-tabs__item.is-top) {
      background: #F7F8FA;
      border-bottom: 1px solid #E4E7ED;
    }
    :deep(.el-tabs__item.is-top.is-active) {
      background: #fff;
      border-bottom: 1px solid #fff;
    }
  }

  .plat {
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .plat-item.el-radio-button {
      :deep(.el-radio-button__inner) {
        width: 80px;
        text-align: center;
        padding: 0;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
      }
    }
    :deep(.plat-item.el-radio-button:first-child),
    :deep(.plat-item.el-radio-button:last-child) {
      .el-radio-button__inner {
        border-radius: 0;
      }
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .plat-item.is-active {
      :deep(.el-radio-button__inner) {
        color: #155bd4;
        background-color: rgba(21,91,212, .1);
      }
    }
  }

}
</style>
